<template>
  <div>
    <h1>计算属性</h1>
    <input type="text" v-model="firstName" /><br />
    <input type="text" v-model="lastName" /><br />
    <input type="text" v-model="fullName2" />
    <h1>{{ fullName1() }}</h1>
    <h1>{{ fullName2 }}</h1>
    <!-- 
        1.


     -->
    <button @click="getThis">看当前组件对象上的属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "a",
      lastName: "b",
    };
  },
  // 需求是将firstName和lastName拼串 a-b
  methods: {
    fullName1() {
      return this.firstName + "-" + this.lastName;
    },
    getThis() {
      console.log(this);
      console.log(this.fullName2);
    },
  },
  /* 
  1.计算属性也是vue组件对象上的属性，this.xxx
  2.计算属性依赖data对象当中的属性进行计算，当data当中的值变化，它也会发生变化
  3.计算属性和方法都能达到相同的效果时，高频操作选用计算属性比较合适
  计算属性有缓存
  缓存：当得到计算属性的值后，它依赖的data当中的数据不发生变化，它的值就会存储到缓存当中，当data中的值发生变化 它进行计算
  methods 使用一次执行一次  开销大
  4.getter setter
  get是获取计算属性的值 return
  set 截取数据进行处理

  
  
  */
  computed: {
    /* 计算属性的getter方法的简写方式 */
    /* fullName2() {
      return this.firstName + "-" + this.lastName;
    }, */
    fullName2: {
      // get 得到 获取
      get() {
        return this.firstName + "-" + this.lastName;
      },
      //   计算属性当中获取计算属性时只会触发getter方法，不会触发setter
      // 当改变计算属性的值时，就会触发setter  setter 拦截 截取
      set(value) {
        console.log(value);
        // this.firstName -前面的值
        // this.lastName  -后面的值
        // 字符串
        const arr = value.split("-");
        console.log(arr);
        this.firstName = arr[0];
        this.lastName = arr[1];
      },
    },
  },
};
</script>

<style lang="less" scoped>
</style>